<template>
    <div id="barCharts">

    </div>
</template>

<script>
    export default {
        name: 'barCharts',

        data() {
            return {

            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                var barcharts = this.$echarts.init(document.getElementById('barCharts'))

                var options = {
                    title: {
                    
                    },
                    legend:{},
                    tooltip:{},
                    dataset:{
                        source:[
                          ['product','2015','2016','2017'],
                          ['Go','54.32','42.56','21.2'],
                          ['Java','33.1','56.3','31.3'],
                          ['C#','87.3','66.4','22.54']
                        ]
                    },
                    xAxis:{type: 'category'},
                    yAxis:{},
                    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        },
        {
            type:'slider',
            yAxisIndex:0,
            start:10,
            end:80
        }
    ],
                    series:[
                        {type:'bar'},
                        {type:'bar'},
                        {type:'bar'}
                    ]
                }
            barcharts.setOption(options);
            }
        }
    }

</script>

<style scoped>
    div {
        height: 600px;
        width: 600px;
    }
</style>